<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //ES5的写法 ：  Object.defineProperty  函数 ，观察对象 。
        // vue2.0核心函数；
        // function observer(obj) {
        //     for (var key in obj) {
        //         let value = obj[key];
        //         Object.defineProperty(obj, key, {
        //             configurable: true,
        //             enumerable: true,
        //             get: function () {
        //                 console.log("get");
        //                 return value;
                            // return obj[key]
        //             },
        //             set: function (newvalue) {
        //                 value = newvalue;
        //             }
        //         })
        //     }
        // }


        // 二、ES6 观察对象  代理对象 Proxy ：代理
        var obj  = {
            name:"张三",
            age:20
        }

        // 可以代理对象的多个属性
        var newObj = new Proxy(obj,{
            get:function(target,key){
                console.log("get触发了",target,key);
                // target : 是代理的对象 
                // key 就是对象里的键名
                return target[key];
            },
            set:function(target,key,newvalue){
                console.log("设置了",target,key,newvalue);
                target[key] = newvalue;
            }
        })

        console.log(newObj);
        // newObj.age; // 触发了get函数
        // newObj.age = 30;


    </script>
</body>

</html>